<template>
  <div id="login">
    <div class="main">
      <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
        <div class="title">
          登录
        </div>
        <el-form-item label="" prop="account" style="margin-left: 0px;" label-width="0">
          <el-input v-model="ruleForm.account" placeholder="请输入联系电话" style="margin-left: 0px"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password" label-width="0">
          <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-button type="primary" size="medium" style="width: 100%;margin: 10px 0;" @click="login">确认登录</el-button>
        <div class="link flex-layout justify-between">
          <el-link href="http://localhost:5000/#/forget" target="_self" ><div class="color-red">忘记密码?</div></el-link>
          <el-divider direction="vertical" class="height-per-100"></el-divider>
          <el-link href="http://localhost:5000/#/register" target="_self">注册账号</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'Login',
  data () {
    return {
      labelPosition: 'left', // 设置标签位置
      ruleForm: {
        account: '', // 账号
        password: '' // 密码
      },
      rules: {
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 表单提交按钮
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 表单重置按钮
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 点击登录的按钮
    login () {
      this.$axios.get('/user/loginUser', {
        params: {
          tel: this.ruleForm.account,
          pwd: this.ruleForm.password
        }
      }).then(response => {
        console.log(response)
        if (response.data.message === '登录成功') {
          // 修改用户是否登录信息
          this.$store.commit('updateUserLogin', !this.$store.state.vuex_user_login)
          // 存储用户信息
          this.$store.commit('updateUserInfo', response.data.data)
          this.$message({
            message: response.data.data.uName + '[用户]，欢迎使用本系统，稍后将跳转到首页',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push('/')
          }, 2000)
        } else {
          this.$message.error(response.data.message)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 跳转注册页面
    toRegister () {
      this.$router.push('/register')
    }
  },
  components: {
    ...mapState([
      'vuex_user_cart',
      'vuex_user_login',
      'vuex_user_Info'
    ])
  }
}
</script>
<style scoped>
  #login {
    width: 100%;
    height: 100%;
    position: relative;
    background: url('~@/assets/img/temp/19.jpg') no-repeat center center;
    background-size: 100% 100%;
  }

  .main {
    padding: 30px 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    width: 20%;
    /*height: 40%;*/
    background: white;
    border-radius: 4px;
  }

  .el-form-item {
    margin-bottom: 18px !important;
  }

  element.style {
    margin-left: 0px !important;
  }

  .link {
    display: flex;
    justify-content: flex-end;
    height: 25px;
  }

  .title {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 20px;
  }

  .el-form-item__content {
    margin-left: 0px !important;
  }

  element.style {
    margin-left: 80px !important;
  }
</style>
